<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/together.css" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			#probapp{
				overflow-x: hidden;
			}
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
				padding-bottom: 51px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav m_barC">
			<h1 class="mui-title">首页</h1>
			<a class="mui-action-back mui-icon mui-icon mui-icon-search mui-pull-right search1"></a>
		</header>
		<div class="mui-content" id="probapp" v-cloak>
				<div class="mui-input-row mui-search ws_search">
				    <input type="search" class="mui-input-clear" placeholder="">
				</div>
				<div class="ws_lunbo ws_100" id="ws_lunbo">
					<ul class="">
						<li class="">
							<img src="images/books_bg.png" alt="" />
						</li>
						<li class="">
							<img src="images/books_bg.png" alt="" />
						</li>
						<li class="">
							<img src="images/books_bg.png" alt="" />
						</li>
						<li class="">
							<img src="images/books_bg.png" alt="" />
						</li>
					</ul>
					<div class="spot"></div>
				</div>
			
				<div class="ws_homeContent">
					<div id="" class="flex3 ws_homeContent_top">
						<span class="recommend flex5">推荐</span>
						<span class="change flex5">换一换 <i class="mui-icon mui-icon-loop "></i></span>
					</div>
					<div class="books_list flex3">
						<!--
                        	作者：592176224@qq.com
                        	时间：2018-12-26
                        	描述：
                       
						<div class="books_item">
							<div class="books_cover ws_100"><img src="../images/books_hea.png" alt="" /></div>
							<div class="ws_spdetail">
								<div>我的旅行</div>
								<span class="ho_books_price">共600页售价90元</span>
							</div>
						</div>
					 -->
						<div class="books_item" v-for="item in booklist" v-on:click="gohomedet(item.bid)">
							<div class="books_cover ws_100">
								<!--
                                	作者：592176224@qq.com
                                	时间：2018-12-25
                                	描述：
								<img :src="item.cover_image" alt="" />
                                -->
								<img src="images/books_hea.png" alt="" />
							
							</div>
							<div class="ws_spdetail">
								<div>{{item.title}}</div>
								<span class="ho_books_price">共 <span style="color: red;">{{item.page_total}}</span>
								页售价<span style="color: red;">{{item.price}}</span>元</span>
							</div>
						</div>
					</div>
				</div>
		</div>
		
		<script	 src="js/jquery.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.enterfocus.js"></script>
		<script src="js/req.js"></script>
		<script src="js/util.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			(function() {
				var booklist='',lis='',spot='',list2='',widths='',
		 		widths1='',arrs='',startX='',moveEndX='',X='',
		 		firstli='',bodyWidth='',lastli='';
				mui.init({
					swipeBack: true, //启用右滑关闭功能
				});
				
				mui.plusReady(function() {
					var self = plus.webview.currentWebview(),
						leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中
						console.log(self);
						console.log(leftPos);

					/**	
					 * drawNativeIcon 绘制带边框的半圆，
					 * 实现原理：
					 *   id为bg的tag 创建带边框的圆
					 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
					 * 	 id为iconBg的红色背景图
					 *   id为icon的字体图标
					 *   注意创建先后顺序，创建越晚的层级越高
					 */
					var drawNativeIcon = util.drawNative('icon', {
						bottom: '5px',
						left: leftPos + 'px',
						width: '60px',
						height: '60px'
					}, [{
						tag: 'rect',
						id: 'bg',
						position: {
							top: '1px',
							left: '0px',
							width: '100%',
							height: '100%'
						},
						rectStyles: {
							color: '#fff',
							radius: '50%',
							borderColor: '#ccc',
							borderWidth: '1px'
						}
					}, {
						tag: 'rect',
						id: 'bg2',
						position: {
							bottom: '-0.5px',
							left: '0px',
							width: '100%',
							height: '45px'
						},
						rectStyles: {
							color: '#fff'
						}
					}, {
						tag: 'rect',
						id: 'iconBg',
						position: {
							top: '5px',
							left: '5px',
							width: '50px',
							height: '50px'
						},
						rectStyles: {
							color: '#d74b28',
							radius: '50%'
						}
					}, {
						tag: 'font',
						id: 'icon',
						text: '\ue600', //此为字体图标Unicode码'\e600'转换为'\ue600'
						position: {
							top: '0px',
							left: '5px',
							width: '50px',
							height: '100%'
						},
						textStyles: {
							fontSrc: '_www/fonts/iconfont.ttf',
							align: 'center',
							color: '#fff',
							size: '30px'
						}
					}]);
					// append 到父webview中
					//self.append(drawNativeIcon);

					//自定义监听图标点击事件
					var active_color = '#fff';
					drawNativeIcon.addEventListener('click', function(e) {
						//mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。', '悬浮球点击事件');
						// 重绘字体颜色
						if(active_color == '#fff') {
							drawNativeIcon.drawText('\ue600', {}, {
								fontSrc: '_www/fonts/iconfont.ttf',
								align: 'center',
								color: '#000',
								size: '30px'
							}, 'icon');
							active_color = '#000';
						} else {
							drawNativeIcon.drawText('\ue600', {}, {
								fontSrc: '_www/fonts/iconfont.ttf',
								align: 'center',
								color: '#fff',
								size: '30px'
							}, 'icon');
							active_color = '#fff';
						}
						plus.webview.open('dynamic/dynamic.html', 'new', {}, 'slide-in-right', 200);

					});
					// 中间凸起图标绘制及监听点击完毕

					// 创建子webview窗口 并初始化
					var aniShow = {};
					util.initSubpage(aniShow);
					
					var 	nview = plus.nativeObj.View.getViewById('tabBar'),
						activePage = plus.webview.currentWebview(),
						targetPage,
						subpages = util.options.subpages,
						pageW = window.innerWidth,
						currIndex = 0;
					
						
					/**
					 * 根据判断view控件点击位置判断切换的tab
					 */
					nview.addEventListener('click', function(e) {
						var clientX = e.clientX;
						if(clientX > 0 && clientX <= parseInt(pageW * 0.25)) {
							currIndex = 0;
						} else if(clientX > parseInt(pageW * 0.25) && clientX <= parseInt(pageW * 0.45)) {
							currIndex = 1;
						} else if(clientX > parseInt(pageW * 0.45) && clientX <= parseInt(pageW * 0.8)) {
							currIndex = 2;
						} else {
							currIndex = 3;
						}
						// 匹配对应tab窗口	
						if(currIndex > 0) {
							targetPage = plus.webview.getWebviewById(subpages[currIndex - 1]);
						} else {
							targetPage = plus.webview.currentWebview();
						}

						if(targetPage == activePage) {
							return;
						}

						//if(currIndex !== 3) { 
							//底部选项卡切换
							util.toggleNview(currIndex);
							// 子页面切换
							util.changeSubpage(targetPage, activePage, aniShow);
							//更新当前活跃的页面
							activePage = targetPage;
						//} else {
							//第四个tab 打开新窗口
							//plus.webview.open('html/new-webview.html', 'new', {}, 'slide-in-right', 200);
						//}//
					});
				});
			})();
			
			var seat = false;
			$(".search1").on("click",function(){
				if(!seat){
					$(".ws_search").css({"display":"block"});
					seat = true;
				}else{
					$(".ws_search").css({"display":"none"});
					seat = false;
				}
				
			})
			
		 	var app = new Vue({
		 		el:'#probapp',
		 		data:{
		 			booklist:'',
		 			lis:'',
		 			spot:'',
		 			list2:'',
		 			widths:'',
		 			widths1:'',
		 			arrs:'',
		 			startX:'',
		 			moveEndX:'',
		 			X:'',
		 			firstli:'',
		 			bodyWidth:'',
		 			lastli:''
		 		},
		 		mounted(){
		 			var that = this;
					that.moren();
					that.booklists();
					
			 	},
			 	methods:{
			 				gohomedet(bid){
			 					console.log(bid);
			 					mui.openWindow({
									url: 'home_details.html',
									id: 'home_details',
								});
			 				},
			 				
			 				booklists(){
								var that = this;
								let data = {
									url:"/api/Book/shop_book_list",
									data:{
										access_token : acctoken()||"",
										search:''
									}
								}
								ajax(data,function(res){
									if(res.code == -1){
										mui.toast(res.message);
									}
									if(res.code == 1){
										console.log(res);
										that.booklist = res.data;
										console.log(that.booklist);
									}
								})
							},
							slibe(index){
		 						var that = this;
						 		that.lis.eq(index + 1).removeClass("scale").siblings().addClass("scale");
								var spant = that.spot.children("span").eq(index);
								spant.addClass("active")
								.siblings().removeClass("active");
								
						 	},
						 	//触摸事件执行动画
							play(index){
								var that = this;
									let o = (that.widths *that.list2) +  (that.widths1 * (that.lis.length - that.list2));
									let e = (that.widths * (index+1)) +  (that.widths1 * (index-1) );
									
									if(index <= -1){
										that.uls.animate({left:-e},function(){  //执行动画后执行css，相同的left需要使用回调
											$(this).css({left:-o});
										})
										index = that.list2 - 1;
									}else if(index >= that.list2){
										that.uls.animate({left:-e},function(){
											$(this).css({left: -(that.widths - that.widths1) });
										})
										index = 0;
									}else{
										that.uls.animate({left:-e});
									}
									that.slibe(index);
							 },
						 	//点击下标执行动画
							play1(index){
								let z = (that.widths *(index+1)) +  (that.widths1 * (index-1) );
								that.uls.stop(true,true).css({left:-z});
								that.slibe(index);
							},
							 moren(){
							 	var that =this;
								 	that.uls = $("#ws_lunbo ul"),
									
									that.spot = $(".spot");
									that.firstli = $('#ws_lunbo ul li').eq(0).clone(); that.lastli = $('#ws_lunbo ul li').last().clone(),  //复制前后两个li
									that.uls.append(that.firstli).prepend(that.lastli)
									that.lis = $("#ws_lunbo ul li");
									that.bodyWidth = document.body.clientWidth, //屏幕宽度
									that.list2 = that.lis.length - 2;  //减掉前后两个li
									that.widths = that.uls.children(":first").width(); //获取li的宽度
									that.widths1 =that.bodyWidth * 0.05,  //获取li的外边距宽度
								
									that.uls.css({left:- (that.widths - that.widths1)  ,width:"4500px"}); //设置默认宽度和left
									that.lis.eq(1).siblings().addClass("scale"); //默认动画
									
										
									for(var i = 0; i<that.list2; i++){
										that.arrs += "<span>"+i+"</span>";
										
									}
									that.spot.append(that.arrs);
									that.spot.children(":first").addClass("active"); //span 设置默认颜色
									
									that.spot.on("click",function(e){
										console.log(e);
										if(e.target.localName == "span"){  //点击切换 是span执行
											var index = $(e.target).index(); //获取当前下标
											$(e.target).addClass("active")			//当前设置颜色，同胞删除颜色
											.siblings().removeClass("active");
											that.play1(index);
										};
									}) 
									
									that.uls.on("touchstart",function(e){  //手指点击时触发
										if(e.cancelable){
											if(!e.defaultPrevented){
												e.preventDefault();
											}
										}
										that.startX = e.originalEvent.changedTouches[0].pageX; //开始时的x轴位置
									
									})
									
								
									
									that.uls.on("touchend",function(e){  //松开手指时触发
										var index  = $(e.target).parent().index()
											if(e.cancelable){
												if(!e.defaultPrevented){
													e.preventDefault();
												}
											}
										 that.moveEndX = e.originalEvent.changedTouches[0].pageX; //结束时的x轴位置
										
										that.X = that.moveEndX - that.startX;  //x轴结束减去开始的位置  X大于0 为左 小于0为右
									
										if(that.X > 0){
											that.play(index - 2);
										}
										if(that.X < 0){
											that.play(index);
											
										}
									})
				
							 }
						 
						
							
			 		}
			 	})
			 	
		</script>
	</body>

</html>